@import "public";

// 补丁 base
@import "~@/assets/style/fixed/base.scss";
// 补丁 element
@import "~@/assets/style/fixed/element.scss";
// 补丁 n-progress
@import "~@/assets/style/fixed/n-progress.scss";

// 动画
@import "~@/assets/style/animate/vue-transition.scss";

// 在这里写公用的class
// 注意 这个文件里只写class
// mixin等内容请在 public.scss 里书写

// 文字相关
.#{$prefix}-text-center {
  text-align: center;
}

// 浮动相关
.#{$prefix}-fl {
  float: left;
}
.#{$prefix}-fr {
  float: right;
}
.#{$prefix}-clearfix:before,
.#{$prefix}-clearfix:after {
  display: table;
  content: "";
}
.#{$prefix}-clearfix:after {
  clear: both;
}

// 边距相关
$sizes: (0, 5, 10, 15, 20);

@for $index from 1 to 6 {
  .#{$prefix}-m-#{nth($sizes, $index)} {
    margin: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-mt-#{nth($sizes, $index)} {
    margin-top: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-mr-#{nth($sizes, $index)} {
    margin-right: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-mb-#{nth($sizes, $index)} {
    margin-bottom: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-ml-#{nth($sizes, $index)} {
    margin-left: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-p-#{nth($sizes, $index)} {
    padding: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pt-#{nth($sizes, $index)} {
    padding-top: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pr-#{nth($sizes, $index)} {
    padding-right: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pb-#{nth($sizes, $index)} {
    padding-bottom: #{nth($sizes, $index)}px !important;
  }
  .#{$prefix}-pl-#{nth($sizes, $index)} {
    padding-left: #{nth($sizes, $index)}px !important;
  }
}

// 快速使用

.#{$prefix}-m {
  margin: 20px !important;
}
.#{$prefix}-mt {
  margin-top: 20px !important;
}
.#{$prefix}-mr {
  margin-right: 20px !important;
}
.#{$prefix}-mb {
  margin-bottom: 20px !important;
}
.#{$prefix}-ml {
  margin-left: 20px !important;
}

.#{$prefix}-p {
  padding: 20px !important;
}
.#{$prefix}-pt {
  padding-top: 20px !important;
}
.#{$prefix}-pr {
  padding-right: 20px !important;
}
.#{$prefix}-pb {
  padding-bottom: 20px !important;
}
.#{$prefix}-pl {
  padding-left: 20px !important;
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.block {
  display: block;
}

.pointer {
  cursor: pointer;
}

.inlineBlock {
  display: block;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

code {
  background: #eef1f6;
  padding: 15px 16px;
  margin-bottom: 20px;
  display: block;
  line-height: 36px;
  font-size: 15px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  a {
    color: #337ab7;
    cursor: pointer;
    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

//main-container全局样式
.pagination-container {
  background-color: #fffffe;
  height: 35px;
  min-height: 35px;
  //margin-top: 30px;
}

.text-center {
  text-align: center;
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;
  &:hover {
    color: rgb(32, 160, 255);
  }
}

.filter-container {
  //padding-bottom: 10px;
}

//refine vue-multiselect plugin
.multiselect {
  line-height: 16px;
}

.multiselect--active {
  z-index: 1000 !important;
}

//add new common css by xiezhuoxun
.page-container {
  padding: 3px;
}

.search-container {
  background-color: #fff;
  padding-top: 6px;
  padding-bottom: 3px;
  padding-right: 10px;
  //border-bottom: 1px solid #e9e9e9;
  .el-col {
    height: 30px;
    line-height: 30px;
  }
  .el-form-item__label {
    font-size: 12px;
    color: #666;
  }
  .el-form-item__content {
    font-size: 13px;
    .el-date-editor {
      margin-top: 3px;
      .el-range-input {
        font-size: 12px;
      }
      .el-range__icon,
      .el-range-separator {
        height: 24px;
        line-height: 24px;
        font-size: 12px;
      }
    }
  }
  .el-input__inner {
    height: 22px !important;
    line-height: 22px !important;
  }
}

.trade-order-page-look {
  .el-form-item__label {
    font-size: 12px;
    color: #666;
  }
  .el-form-item__content {
    font-size: 13px;
  }
}
.trade-order-page {
  .el-form-item{
    .el-form-item__content {
      .el-input-group {
        vertical-align: middle;
      }
    }
  }
  .el-form-item__label {
    font-size: 12px;
    color: #666;
  }
  .el-form-item__content {
    font-size: 13px;
  }
  .el-form-item__error {
    display: none;
  }
  .el-input__inner {
    height: 22px !important;
    line-height: 22px !important;
    font-size: 12px !important;
  }
}

.table-container {
  background-color: #fff;
  margin: 0px 5px 1px 5px;
  flex: 1;
  .table-btn {
    .el-button {
      padding: 6px;
      margin: 0px 0 4px 4px;
    }
  }
}

.el-table__header {
  height: 20px;
  font-size: 12px;
}

.clear::after {
  display: table;
  content: "";
  clear: both;
}

@media screen and (min-width: 1201px) and (max-width: 1500px) {
  .el-col-lg-6 {
    width: 33.3333%;
  }
}

.el-table th {
  background: #bae7ff !important;
  color: #222222;
  height: 18px;
  line-height: 18px;
}

.el-icon-arrow-right {
  margin-left: 3px;
  margin-right: -3px;
}

.el-button--mini {
  font-size: 12px;
}

.el-button.add span,
.el-button.edit span,
.el-button.reset span {
  margin-left: 10px;
}

.filter-container.bottom-pd {
  padding: 0px 16px 20px 15px;
  background-color: #fff;
}
.filter-container.top-pd {
  padding-top: 15px;
  background-color: #fff;
}
.el-table {
  font-size: 12px;
  color: #222;
}

.el-table {
  .cell {
    font-size: 12px;
    .el-button--text {
      padding: 0px;
    }
  }
}

.el-table__footer {
  font-weight: 900;
  font-size: 12px;
  color: #000;
}

.el-table--mini {
  .cell {
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 20px;
    height: 22px;
  }
  td{
    padding: 3px 0 !important;
  }
  th{
    padding: 3px 0 !important;
  }
}

.el-dialog__body {
  padding: 10px 20px !important;
  .el-form-item__label {
    font-size: 12px;
    color: #666;
  }

  .el-input__inner {
    height: 22px !important;
    line-height: 22px !important;
    font-size: 12px !important;
  }

  .el-form-item {
    margin-bottom: 4px;
  }
  .el-form-item__content {
    line-height: 30px;
    font-size: 13px;
    margin-top: 5px;
    .el-date-editor--daterange {
      margin-top: 6px;
      .el-range-input {
        font-size: 12px;
      }
      .el-range__icon,
      .el-range-separator {
        height: 24px;
        line-height: 24px;
        font-size: 12px;
      }
      .el-range__close-icon {
        line-height: 24px;
        font-size: 12px;
        margin-top: -8px;
      }
    }
  }
  .el-input__icon {
    line-height: 30px;
  }
  .el-form-item__error {
    margin-top: -10px;
    display: inline;
    padding-top: 0px;
    font-size: 10px;
  }
}

.el-table {
  .cell {
    /*-webkit-box-sizing: border-box;*/
    /*box-sizing: border-box;*/
    /*white-space: normal;*/
    /*word-break: break-all;*/
    white-space: nowrap;
    text-overflow: ellipsis;
    /*line-height: 28px;*/
    /*height: 28px;*/
  }
}

.el-menu--horizontal {
  border-bottom: 0;
}

/*.el-col {*/
/*height: 41px;*/
/*line-height: 41px;*/
/*}*/
.el-form-item__error {
  margin-top: -2px;
  font-size: 10px;
}

.el-table__body tr:hover > td {
  background-color: transparent !important;
}
.el-table__body tr.current-row > td {
  background-color: #CFEBF2 !important;
}

.handsontable .ht_master thead, 
.handsontable .ht_master tr th, 
.handsontable .ht_clone_left thead {
  visibility: visible;
}
.ht_master thead tr:last-child th, 
.ht_master ~ .handsontable thead tr:last-child th, 
.ht_master thead tr.lastChild th,
.ht_master ~ .handsontable thead tr.lastChild th 
{
  background-color: #bae7ff;
}
/* 用来区分 handsontable只读项字体色和背景色*/
.orderEditTable{
	.handsontable {
		.htDimmed {
		    color: #989898;
		    background-color: #F5F7FA;
    }
  }
}
/* ============================================================
   flex：定义布局为盒模型
   flex-v：盒模型垂直布局
   flex-1：子元素占据剩余的空间
   flex-align-center：子元素垂直居中
   flex-pack-center：子元素水平居中
   flex-center-vh：子元素垂直水平同时居中
   flex-pack-justify：子元素两端对齐
   兼容性：ios 4+、android 2.3+、winphone8+
   ============================================================ */
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flex-v {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flex-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex-pack-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flex-center-vh {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flex-pack-justify {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
